<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef"> </GlobalTopBar>
    <!-- 顶部蓝色 -->
    <view class="topblue">
      <image :src="`${store.imgDomain}master_home_1.png`" mode="scaleToFill" />
    </view>
    <!-- 内容 -->
    <view class="page_content">
      <DragButton>
        <view
          class="td_imgbox td_1"
          v-if="[1, 2, 3].includes(store.workerData.work_status)"
          @click="doSaveWorkerWorkStatus(4)"
        >
          <image :src="`${store.imgDomain}td_1.png`" mode="scaleToFill" />
        </view>
        <!-- <view
          class="td_imgbox td_1"
          v-else-if=""
        >
          <image :src="`${store.imgDomain}td_2.png`" mode="scaleToFill" />
        </view> -->
        <view
          class="td_imgbox td_1"
          v-else-if="store.workerData.work_status === 4"
          @click="doSaveWorkerWorkStatus(1)"
        >
          <image :src="`${store.imgDomain}td_3.png`" mode="scaleToFill" />
        </view>
      </DragButton>

      <!-- 顶部信息 -->
      <view class="wbox">
        <!-- 头像 -->
        <view class="headbox">
          <image
            class="headimg"
            :src="store.workerData?.headimg || `${store.imgDomain}my_hade.png`"
            mode="scaleToFill"
          />
        </view>
        <!-- 其他信息 -->
        <view class="infobox">
          <view class="infobox_item infobox_left">
            <text style="font-size: 30rpx">{{
              `${store.workerData?.worker_name}  ${store.workerData?.phone}`
            }}</text>
            <view class="vts flex">
              <image
                :src="`${store.imgDomain}master_home_2.png`"
                mode="scaleToFill"
              />
              <view
                class="over_text_200"
                v-if="store.workerData?.first_goods_category_list?.length"
                >{{
                  store.workerData?.first_goods_category_list
                    .map((i) => i.goods_category_title)
                    .join(',')
                }}</view
              >
            </view>
            <view class="t2" @click="store.to('/pages/master/home/mydatas')"
              ><uni-icons type="location" size="20" color="#fff"></uni-icons
              >{{ store.workerData?.region_name
              }}<uni-icons
                style="margin-left: 4rpx"
                color="#fff"
                type="compose"
                size="16"
              ></uni-icons
            ></view>
          </view>
        </view>
      </view>
      <!-- 消息 -->
      <view class="hybox" @click="store.to('/pages/master/home/message')">
        <template>
          <image
            class="audio_img"
            :src="`${store.imgDomain}master_home_3.png`"
            mode="scaleToFill"
          />
          <view>{{ newMessage.content || '暂无消息' }}</view>
        </template>
      </view>
      <!-- 收入管理 -->
      <view
        class="srbox flex_center"
        @click="store.to('/pages/master/home/commission')"
      >
        <view class="srbox_item flex_center">
          <text class="t1">0.00</text>
          <text class="t2">总收入</text>
        </view>
        <view class="srbox_item flex_center">
          <text class="t1">0.00</text>
          <text class="t2">本月收入</text>
        </view>
        <view class="srbox_item flex_center">
          <text class="t1">0.00</text>
          <text class="t2">可提现</text>
        </view>
      </view>
      <!-- 我的订单 -->
      <view class="page_item orderbox">
        <view class="o_tops">
          <text style="font-size: 30rpx; font-weight: 600">订单管理</text>
          <view @click="uni.redirectTo({ url: '/pages/master/order/index' })"
            ><text class="ckqb" style="font-size: 24rpx">查看全部</text>
            <uni-icons
              style="transform: translateY(3rpx)"
              type="right"
              size="16"
              color="b85f1b"
            ></uni-icons
          ></view>
        </view>
        <!-- 状态 -->
        <view class="stabox">
          <view
            class="stabox_item"
            v-for="(item, index) in orderList"
            :key="index + 1"
            @click="
              uni.redirectTo({
                url: `/pages/master/order/index?index=${item.type}`,
              })
            "
          >
            <view class="numbox" v-if="item.num">{{ item.num }}</view>
            <image
              :class="`img${index + 1}`"
              :src="item.url"
              mode="scaleToFill"
            />
            <text class="ltext">{{ item.text }}</text>
          </view>
        </view>
      </view>
      <!-- 入口 -->
      <view class="page_item rkbox">
        <view class="stabox">
          <template v-for="(item, index) in rkList" :key="index + 1">
            <template v-if="!index">
              <button
                id="contactBtn"
                class="flex_center"
                open-type="contact"
                bindcontact="onContact"
              >
                <view class="stabox_item">
                  <view class="imgbox">
                    <image
                      :class="`img${index + 1}`"
                      :src="item.url"
                      mode="scaleToFill"
                    />
                  </view>
                  <text class="ltext">{{ item.text }}</text>
                </view>
              </button>
            </template>
            <view v-else class="stabox_item" @click="liFun(item)">
              <view class="imgbox">
                <image
                  :class="`img${index + 1}`"
                  :src="item.url"
                  mode="scaleToFill"
                />
              </view>
              <text class="ltext">{{ item.text }}</text>
            </view>
          </template>
        </view>
      </view>
      <!-- 文字 -->
      <view class="btext">
        <image :src="`${store.imgDomain}my_text2.png`" mode="scaleToFill" />
      </view>
    </view>

    <!-- 底部菜单 -->
    <tabBar
      :current-index="0"
      :tab-list="store.tabList2"
      :style-config="{ activeColor: '#6ECDC1', inactiveColor: '#666666' }"
    ></tabBar>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useCounterStore } from '@/store';
import tabBar from '@/components/tabBar.vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { formatTimestamp } from '@/utils/validate';
import DragButton from '@/components/dragon-dragButton/index.vue';

const title = ref('我的');
const store = useCounterStore();
const couponQuantity = ref(0);
const workerData = ref({});
const orderList = computed(() => [
  {
    url: `${store.imgDomain}master_home_4.png`,
    num: worksNumsData.value?.pending_accept_count,
    type: 0,
    text: '待接单',
  },
  {
    url: `${store.imgDomain}master_home_5.png`,
    num: worksNumsData.value?.serviceing_count,
    type: 2,
    text: '服务中',
  },
  {
    url: `${store.imgDomain}master_home_6.png`,
    num: 0,
    type: 3,
    text: '已完成',
  },
  {
    url: `${store.imgDomain}master_home_7.png`,
    num: worksNumsData.value?.expire_and_refuse_count,
    type: 5,
    text: '超时/拒单',
  },
]);
const rkList = [
  {
    url: `${store.imgDomain}my_rk_1.png`,
    text: '联系客服',
    path: '',
    type: 'phone',
  },
  {
    url: `${store.imgDomain}master_home_8.png`,
    text: '消息通知',
    path: '/pages/master/home/message',
  },
  {
    url: `${store.imgDomain}master_home_9.png`,
    text: '历史订单',
    path: '/pages/master/order/index',
    type: '2',
  },
  {
    url: `${store.imgDomain}master_home_10.png`,
    text: '我的二维码',
    path: '/pages/master/recommend/index',
    type: '2',
  },
  // {
  //   url: `${store.imgDomain}master_home_11.png`,
  //   text: '我的佣金',
  //   path: '',
  // },
  {
    url: `${store.imgDomain}master_out.png`,
    text: '退出登录',
    path: '/pages/masterlogin/index',
  },
];

const liFun = (item) => {
  if (item?.type === 'phone') {
    handleCall();
  } else {
    if (item.text === '退出登录') {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        confirmText: '确定', // 确认按钮文字
        cancelText: '取消', // 取消按钮文字
        success: async (res) => {
          if (res.confirm) {
            await request('worker/login/outLogin');
            store.outFun();
          }
        },
        fail: (err) => {
          console.error('显示模态框失败', err);
        },
      });
      return;
    }
    if (!item.path) return;
    if (item.type == 2) {
      uni.redirectTo({
        url: item.path,
      });
    } else {
      store.to(item.path);
    }
  }
};

// 服务热线
const handleCall = () => {
  uni.makePhoneCall({
    phoneNumber: store.customerServicePhone, // 要拨打的电话号码（字符串类型）
    success: () => {
      console.log('拨打电话请求已发出');
    },
  });
};
const newMessage = ref({});
// 获取首页最新一条系统消息
const getFirstSystemMessageForWorker = async () => {
  const data = await request('worker/index/getFirstSystemMessageForWorker');
  newMessage.value = data;
};

const worksNumsData = ref({});

// 获取各状态订单数量
const getServiceOrderCountByWorkStatus = async () => {
  worksNumsData.value = await request(
    'worker/order/getServiceOrderCountByWorkStatus',
  );
};
// 切换工作状态
const doSaveWorkerWorkStatus = async (work_status) => {
  await request('worker/index/doSaveWorkerWorkStatus', { work_status }, 'post');
  store.getWorkerByOpenId();
};
onShow(() => {
  getServiceOrderCountByWorkStatus();
  getFirstSystemMessageForWorker();
});
</script>

<style scoped lang="scss">
.page-container {
  color: #fff;
  background-color: #f8f8f8;
}
.topblue {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  image {
    width: 750rpx;
    height: 448rpx;
  }
}
.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.page_content {
  position: relative;
  z-index: 1;
  padding: 20rpx;
  color: #333;
  .wbox {
    position: relative;
    display: flex;
    align-items: center;
    .tz_img {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      image {
        width: 54rpx;
        height: 48rpx;
      }
    }
    .headbox {
      width: 71rpx;
      height: 71rpx;
      margin-right: 20rpx;
      .headimg {
        width: 71rpx;
        height: 71rpx;
        border-radius: 50%;
        border: 1rpx solid #1383ff;
      }
    }
    .infobox {
      flex: 1;
      display: flex;
      justify-content: space-between;
      font-size: 24rpx;
      color: #fff;
      .infobox_item {
        display: flex;
        flex-direction: column;
        .vts {
          margin: 10rpx 0;
          image {
            width: 28rpx;
            height: 27rpx;
            margin: 0 10rpx;
          }
        }
        .t2 {
          display: flex;
          align-items: center;
        }
        .rtoptext {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding-right: 10rpx;
          .line {
            display: block;
            width: 1rpx;
            height: 33rpx;
            background-color: rgba(255, 255, 255, 0.3);
            margin: 0 20rpx;
          }
        }
      }
      .infobox_right {
        box-sizing: border-box;
        padding-bottom: 8rpx;
        justify-content: space-between;
      }
    }
  }
  .modbox {
    position: relative;
    margin: 38rpx 0 25rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;

    .line {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1rpx;
      height: 41rpx;
      background-color: #0948b6;
    }
    view {
      display: flex;
      align-items: center;
      justify-content: center;
      .yhqimg {
        width: 38rpx;
        height: 34rpx;
      }
      .qbimg {
        transform: translateY(-2rpx);
        width: 40rpx;
        height: 39rpx;
      }
      .t1 {
        margin: 0 15rpx;
      }
    }
    .yhq,
    .qb {
      flex: 1;
    }
  }
  .page_item {
    border-radius: 20rpx;
    border: 1rpx solid #71cdc4;
    box-sizing: border-box;
    padding: 30rpx;
    background-color: #fff;
    .o_tops {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
    .stabox {
      display: flex;
    }
    .stabox_item {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 20rpx;
      width: 25%;
      height: 120rpx;
      &.ac {
        opacity: 0;
        pointer-events: none;
      }
    }
    &.orderbox {
      .ltext {
        margin-top: 10rpx;
        color: $uni-text-color-grey;
      }
      .img1 {
        width: 54rpx;
        height: 50rpx;
      }
      .img2 {
        width: 54rpx;
        height: 51rpx;
      }
      .img3 {
        width: 55rpx;
        height: 55rpx;
      }
      .img4 {
        width: 54rpx;
        height: 56rpx;
      }
      .numbox {
        position: absolute;
        top: 0;
        right: 30rpx;
        background-color: #ff0000;
        padding: 0 10rpx;
        line-height: 30rpx;
        border: 1rpx solid #fff;
        font-size: 18rpx;
        color: #fff;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    &.rkbox {
      margin-top: 26rpx;
      flex-wrap: wrap;
      .stabox {
        display: flex;
        flex-wrap: wrap;
      }
      .ltext {
        margin-top: 5rpx;
      }
      .imgbox {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .img1 {
        width: 48rpx;
        height: 52rpx;
      }
      .img2 {
        width: 50rpx;
        height: 51rpx;
      }
      .img3 {
        width: 40rpx;
        height: 47rpx;
      }
      .img4 {
        width: 45rpx;
        height: 45rpx;
      }
      .img5 {
        width: 52rpx;
        height: 54rpx;
      }
      .img6 {
        width: 54rpx;
        height: 54rpx;
      }
    }
    .o_bottom {
      padding-top: 20rpx;
      position: relative;
      border-top: 1rpx solid #c3ddfb;
      color: $uni-text-color-grey;
      view {
        flex: 1;
        justify-content: center;
        .limg {
          width: 32rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }
        .rimg {
          width: 30rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }
      }
      &::after {
        content: ' ';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1rpx;
        height: 30rpx;
        background-color: #969696;
      }
    }
  }
  .btext {
    position: relative;
    margin-top: 35rpx;
    display: flex;
    justify-content: center;
    &::after {
      content: ' ';
      width: 100rpx;
      height: 1rpx;
      position: absolute;
      top: 50%;
      left: 140rpx;
      transform: translateY(-50%);
      background-color: #93dad3;
    }
    &::before {
      content: ' ';
      width: 100rpx;
      height: 1rpx;
      position: absolute;
      top: 50%;
      right: 140rpx;
      transform: translateY(-50%);
      background-color: #93dad3;
    }
    image {
      position: relative;
      display: block;
      opacity: 0.6;
      width: 185rpx;
      height: 38rpx;
    }
  }
}
.hybox {
  border-radius: 15rpx;
  background-color: #fff;
  font-size: 24rpx;
  box-sizing: border-box;
  padding: 20rpx 35rpx;
  display: flex;
  align-items: center;
  display: flex;
  margin: 10rpx 0;
  .audio_img {
    margin-right: 10rpx;
    width: 34rpx;
    height: 31rpx;
  }
}
.hybtn {
  display: flex;
  align-items: center;
  font-size: 20rpx;
  color: #315dd8;
  padding-left: 20rpx;
  background-color: #cfe9ff;
  border-radius: 17rpx;
  line-height: 34rpx;
}
.hyicon {
  width: 33rpx;
  height: 30rpx;
  margin-right: 15rpx;
}
.hyname {
  font-size: 30rpx;
  color: #ffc66e;
}
.line {
  height: 26rpx;
  width: 1rpx;
  background-color: #fff;
  margin: 0 20rpx;
}
.times {
  color: #fff;
  font-size: 24rpx;
}
.ckqb {
  color: $uni-text-color-grey;
}
.srbox {
  padding: 30rpx 0;
  background-color: #fff;
  border: 1rpx solid #71cdc4;
  border-radius: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  .srbox_item {
    width: 33%;
    flex-direction: column;
    .t1 {
      font-size: 36rpx;
      font-weight: 700;
      margin-bottom: 20rpx;
    }
    .t2 {
      color: $uni-text-color-grey;
    }
  }
}
#contactBtn {
  width: 25%;
  .stabox_item {
    width: 100%;
  }
}
.kefu2_img {
  width: 125rpx;
  height: 125rpx;
}
.tdkf {
  border-radius: 50%;
  image {
    border-radius: 50%;
  }
  &::after {
    display: none;
  }
}
.td_imgbox {
  image {
    width: 141rpx;
    height: 141rpx;
  }
}
</style>
